<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2024/8/11
  Time: 0:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>SUN 图书馆</title>
    <link type="text/css" rel="stylesheet"
          href="../../bootstrap-4.4.1-dist/css/bootstrap.css">
    <script src="../../js/jquery.js"></script>
    <script src="../../bootstrap-4.4.1-dist/js/bootstrap.js"></script>
<style>
    body {
        user-select: none; /* 禁止文本被选中 */
        -webkit-user-select: none; /* Chrome浏览器的兼容性处理 */
        -moz-user-select: none; /* Firefox浏览器的兼容性处理 */
        -ms-user-select: none; /* IE/Edge浏览器的兼容性处理 */
    }

    .navA {
        cursor: pointer; /* 添加小手效果 */
        color: black; /* 初始颜色 */
        line-height: 30px;
    }

    .content {
        padding: 0 30px;
    }

    .list-group-item {
        cursor: pointer; /* 添加小手效果 */
    }

    /* 左侧列表样式 */
    .left-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .left-list li {
        padding: 10px;
        background-color: #f7f7f7;
        border-bottom: 1px solid #ddd;
    }

    .left-list li:hover {
        background-color: #e7e7e7;
    }

    /* 搜索栏样式 */
    .search-bar {
        cursor: pointer; /* 添加小手效果 */
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .search-icon {
        font-size: 20px;
        margin-right: 10px;
    }

    .search-input {
        flex-grow: 1;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    /* 图书列表样式 */
    .book-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 20px;
        padding: 0 20px;
    }

    .book-list::-webkit-scrollbar, .borrowList::-webkit-scrollbar {
        width: 0;
    }

    .book-item {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        text-align: center;
    }

    #homeBookList div {
        cursor: pointer; /* 添加小手效果 */
    }

    .book-list {
        overflow: auto;
        height: calc(100vh - 200px); /* 假设搜索栏高度为100px */
        flex-direction: column;
    }

    .borrowList {
        overflow: auto;
        height: 650px;
    }

    .book-item {
        margin-bottom: 10px;
    }

    #borrowRenew {
        border: none;
        width: 400px;
        height: 300px;
        position: absolute;
        top: 100px;
        left: 150px;
        border-radius: 10px;
        background-color: white;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4);
    }

    #borrowRenewRenewDay::-webkit-inner-spin-button,
    #borrowRenewRenewDay::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    #borrowRenewRenewDay {
        width: 180px;
        height: 25px;
    }

    #borrowRenewBt, #borrowRenewBtc {
        width: 60px;
        height: 20px;
        font-size: 10px;
        background-color: white;
        border-radius: 4px;
        border: 0.5px solid #333333;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    }

</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: white">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="../../image/logo.png" alt="Logo" style="border-radius: 50%;" width="30" height="30"
                 class="d-inline-block align-top">
            SUN 图书馆
        </a>
        <a></a><a></a><a></a>
        <a class="navA"><img src="../../image/首页%20(3).png" alt="Logo" style="border-radius: 50%;" width="30"
                             height="30" class="d-inline-block align-top">首页</a>
        <a class="navA"><img src="../../image/我的借阅2.png" alt="Logo" style="border-radius: 50%;" width="30"
                             height="30" class="d-inline-block align-top">借阅</a>
        <a class="navA"><img src="../../image/罚款.png" alt="Logo" style="border-radius: 50%;" width="30" height="30"
                             class="d-inline-block align-top">罚款记录</a>
        <a class="navA"><img src="../../image/借阅历史.png" alt="Logo" style="border-radius: 50%;" width="30"
                             height="30" class="d-inline-block align-top">借阅历史</a>
        <a class="navA"><img src="../../image/个人%20(1).png" alt="Logo" style="border-radius: 50%;" width="30"
                             height="30" class="d-inline-block align-top">我的</a>
    </div>
</nav>
<p style="background-color: #FFD700;height: 5px;width: 100%"></p>
<!--首页-->
<div id="home" class="content container">
    <div class="row">
        <!-- 左侧列表 -->
        <div class="col-3">
            <ul id="homeUl" class="list-group">
                <li codeId="0" class="list-group-item homeUlLi" onclick="homeUlLiOnclick(this)">全部</li>
            </ul>
        </div>
        <!-- 右侧内容 -->
        <div class="col-9">
            <div class="container">
                <div class="search-bar">
                    <span onclick="homeSearch()" class="search-icon">&#128269;</span>
                    <input type="text" id="homeSearchText" class="search-input" placeholder="搜索书籍...">
                </div>

                <!-- 图书列表 -->
                <div class="book-list" id="homeBookList">
                    <div class="book-item" style="border: 0px">
                        <img src="#">
                        <h3>书名1</h3>
                        <p>作者1</p>
                        <p>借阅状态</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--借阅-->
<div id="borrow" class="content container">
    <div class="container-fluid h-100">
        <div class="row h-100">
            <div class="col-md-4" style="border-right:2px solid #333">
                <!-- 左侧窗体内容 -->
                <p><span style="background-color: #333333">&nbsp;</span>&nbsp;暂存架</p>
                <div id="borrowTS" style="height: 600px;">
                    <!--暂存架内容-->
                    <p id="noDataImage" style="text-align: center;padding-top: 100px">
                        <img src="../../image/专业库.png" style="width: 100px">
                        <br>快去添加图书吧
                    </p>
                </div>
                <p style="text-align: right">
                    <input type="button" onclick="checkAllBookTs()" value="一键全选"
                           style="background-color: #333333;color: white">
                    <input type="button" value="借阅" onclick="borrowBookTs()"
                           style="background-color: #333333;color: white">
                    <input type="button" onclick="eliminateBookTs()" value="清除"
                           style="background-color: #333333;color: white"></p>
            </div>
            <div class="col-md-8">
                <!-- 右侧窗体内容 -->
                <p><span style="background-color: brown">&nbsp;</span>&nbsp;借阅架&nbsp; <span id="borrowSt"
                                                                                               style="height: 10px;width: 10px;border-radius: 50%;display:flex;margin: -15px 0 0 100%">&nbsp;</span>
                <div class="container">
                    <div id="borrowDiv" class="borrowList">
                        <!-- 图书借阅架 -->
                    </div>
                </div>
                <div id="borrowRenew" style="display: none">
                    <p style="font-size: 25px;text-align: center;margin-top: 20px;margin-bottom: 30px">《<span
                            id="borrowRenewBookName">喜羊羊</span>》</p>
                    <p style="font-size: 20px;padding-left: 50px"><strong>到期日期:</strong>&nbsp;<span
                            style="color: #333333" id="borrowRenewBorrowDate">2022-02-02 10:10:10</span></p>
                    <p style="height: 15px"></p>
                    <p style="font-size: 20px;padding-left: 50px"><strong>续借天数:</strong>&nbsp;<input
                            id="borrowRenewRenewDay" type="number"></p>
                    <p style="text-align: center;margin-top: 60px">
                        <input type="button" id="borrowRenewBt" value="确认" onclick="borrowRenew()">&nbsp;&nbsp;&nbsp;
                        <input type="button" id="borrowRenewBtc" value="取消" onclick="borrowRenewC()">
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--罚款记录-->
<div id="fine" class="content container">
    <table class="table table-striped">
        <thead>
        <tr style="text-align: center">
            <th>罚款缴纳Id</th>
            <th>图书名称</th>
            <th>罚款金额</th>
            <th>缴纳时间</th>
        </tr>
        </thead>
        <tbody id="fineTab">
        <!-- 在这里插入数据 -->
        </tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#" onclick="FineUpPage()">上一页</a></li>
            <li class="page-item"><a class="page-link" style="color: blue"><span id="fineCurrentPage">1</span>/<span id="fineAllPage">1</span></a></li>
            <li class="page-item"><a class="page-link" href="#" onclick="FineDownPage()">下一页</a></li>
        </ul>
    </nav>
</div>
<!--借阅历史-->
<div id="borrowHistory" class="content container">
    <table class="table table-striped">
        <thead>
        <tr style="text-align: center">
            <th scope="col">借阅Id</th>
            <th scope="col">借阅时间</th>
            <th scope="col">书籍名称</th>
            <th scope="col">借阅天数</th>
            <th scope="col">续借天数</th>
            <th scope="col">罚款</th>
        </tr>
        </thead>
        <tbody id="borrowHistoryTab">
        <!-- 示例数据，实际数据应从数据库或其他数据源获取 -->
        </tbody>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="page-item"><a class="page-link" href="#" onclick="borrowHistoryUpPage()">上一页</a></li>
            <li class="page-item"><a class="page-link" style="color: blue"><span id="borrowHistoryCurrentPage">1</span>/<span id="borrowHistoryAllPage">1</span></a></li>
            <li class="page-item"><a class="page-link" href="#" onclick="borrowHistoryDownPage()">下一页</a></li>
        </ul>
    </nav>
</div>
<!--我的-->
<div id="my" class="content container">
    <div style="border: 1px solid #333;border-radius: 10px;text-align: center;background-color: white;color: #4e555b;
            padding: 20px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);">
        <h1 class="text-center mt-5"><strong>我的信息</strong></h1>
        <div class="row mt-5">
            <div class="col-md-6">
                <h3><strong>名称</strong></h3>
                <p id="my-name" style="color: rosybrown"></p>
            </div>
            <div class="col-md-6">
                <h3><strong>可借数量</strong></h3>
                <p id="my-borrowSum" style="color: rosybrown"></p>
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-md-6">
                <h3><strong>邮箱</strong></h3>
                <p id="my-email" style="color: rosybrown"></p>
            </div>
            <div class="col-md-6">
                <h3><strong>余额</strong></h3>
                <p id="my-money" style="color: rosybrown"></p>
            </div>
        </div>

    </div>
    <div class="row mt-5">
        <div class="col-md-6">
            <p><a href="../../jsp/changePwd/changePwd.jsp" class="btn btn-primary">密码修改</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="../../jsp/topUp/topUp.jsp" class="btn btn-primary">充值</a>
        </div>
    </div>
</div>
</body>
</html>
<script>
    window.onload = function () {
        // 初始化效果
        $('.navA:first').css('color', 'orange');
        $('.navA:first').css('font-size', '120%');
        $('.content').css('display', 'none')
        // // 首页
        $('#home').slideDown()
        // 首页左侧列表加载
        homeUlLoad()
        // 全部
        $('#homeUl li:first').css('color', '#FFA500');
        //图书加载
        bookLoad(0, '')
        //加载my信息
        myLoad()
    };


    $('.navA').click(function () {
        $('.content').slideUp()
        let n = $(this).text()
        if (n === '首页') {
            $('#home').slideDown()
            //图书加载
            bookLoad(0, '')
        } else if (n === '借阅') {
            if ($('#my-name').html() == '') {
                alert("请先登录!")
                window.location.href = "../../html/login/login.html"
            }
            $('#borrow').slideDown()
            //暂存架
            borrowTsShow()
            //借阅架
            borrowBookTsShow()
            borrowRenewC()
        } else if (n === '罚款记录') {
            if ($('#my-name').html() == '') {
                alert("请先登录!")
                window.location.href = "../../html/login/login.html"
            }
            $('#fine').slideDown()
            //罚款信息加载
            fineTabShow(1)
            //页数信息加载
            finePageShow()
            borrowRenewC()
        } else if (n === '借阅历史') {
            if ($('#my-name').html() == '') {
                alert("请先登录!")
                window.location.href = "../../html/login/login.html"
            }
            $('#borrowHistory').slideDown()
            //借阅历史信息加载
            borrowHistoryTabShow(1)
            //页数信息加载
            borrowHistoryPageShow()
            borrowRenewC()
        } else if (n === '我的') {
            if ($('#my-name').html() == '') {
                alert("请先登录!")
                window.location.href = "../../html/login/login.html"
            }
            $('#my').slideDown()
            borrowRenewC()
        }
    })

    //借阅历史上一页
    function borrowHistoryUpPage() {
        //获取当前页进行判断
        let page = $('#borrowHistoryCurrentPage').html()
        if (page > 1){
            page--
            $('#borrowHistoryCurrentPage').html(page)
            borrowHistoryTabShow(page)
        }else {
            alert("已经是第一页啦!!!")
        }
    }

    //借阅历史下一页
    function borrowHistoryDownPage() {
        //获取当前页进行判断
        let page = $('#borrowHistoryCurrentPage').html()
        //获取总页数
        let allPage = $('#borrowHistoryAllPage').html()
        if (page < allPage){
            page++
            $('#borrowHistoryCurrentPage').html(page)
            borrowHistoryTabShow(page)
        }else {
            alert("已经是最后一页啦!!!")
        }
    }


    //借阅历史总页数加载
    function borrowHistoryPageShow() {
        $.ajax({
            'url': '../../BorrowController/borrowHistoryPageShow',
            'type': 'post',
            'data': {},
            'dataType': 'json',
            'success': borrowHistoryPageShowSuccess
        })
    }
    function borrowHistoryPageShowSuccess(data) {
        $('#borrowHistoryCurrentPage').html(1)
        $('#borrowHistoryAllPage').html(data)
    }

    //借阅历史信息加载
    function borrowHistoryTabShow(page) {
        $.ajax({
            'url': '../../BorrowController/borrowHistoryTabShow',
            'type': 'post',
            'data': {opr, page},
            'dataType': 'json',
            'success': borrowHistoryTabShowSuccess
        })
    }
    function borrowHistoryTabShowSuccess(data) {
        $('#borrowHistoryTab tr').remove()
        data.forEach(dd => {
            $('#borrowHistoryTab').append(`<tr style="text-align: center">
            <td>`+dd.id+`</td>
            <td>`+dd.borrowDate+`</td>
            <td>《`+dd.bookName+`》</td>
            <td>`+dd.borrowDays+`</td>
            <td>`+dd.renewDays+`</td>
            <td>￥&nbsp;<span  style="color: red;">`+parseFloat(dd.amount).toFixed(2)+`</span></td>
        </tr>`)
        })
    }

    //罚款记录上一页
    function FineUpPage() {
        //获取当前页进行判断
        let page = $('#fineCurrentPage').html()
        if (page > 1){
            page--
            $('#fineCurrentPage').html(page)
            fineTabShow(page)
        }else {
            alert("已经是第一页啦!!!")
        }
    }

    //罚款记录下一页
    function FineDownPage() {
        //获取当前页进行判断
        let page = $('#fineCurrentPage').html()
        //获取总页数
        let allPage = $('#fineAllPage').html()
        if (page < allPage){
            page++
            $('#fineCurrentPage').html(page)
            fineTabShow(page)
        }else {
            alert("已经是最后一页啦!!!")
        }
    }

    //罚款记录总页数查询
    function finePageShow() {
        $.ajax({
            'url': '../../FineController/finePageShow',
            'type': 'post',
            'data': {},
            'dataType': 'json',
            'success': finePageShowSuccess
        })
    }
    function finePageShowSuccess(data){
        $('#fineCurrentPage').html(1)
        $('#fineAllPage').html(data)
    }

    //罚款记录查询
    function fineTabShow(page) {
        $.ajax({
            'url': '../../FineController/fineTabShow',
            'type': 'post',
            'data': {page},
            'dataType': 'json',
            'success': fineTabShowSuccess
        })
    }
    function fineTabShowSuccess(data) {
        $('#fineTab tr').remove();
        data.forEach(dd => {
            $('#fineTab').append(` <tr style="text-align: center">
        <th>`+dd.id+`</th>
        <th>《`+dd.name+`》</th>
        <th>￥&nbsp;<span style="color: red">`+parseFloat(dd.amount).toFixed(2)+`</span></th>
        <th>`+dd.paidDate+`</th>
    </tr>`)
        });

    }

    //还书
    function returnBook(borrowId) {
        let opr = "returnBook"
        $.ajax({
            'url': '../../BorrowServlet.action',
            'type': 'post',
            'data': {opr, borrowId},
            'dataType': 'json',
            'success': returnBookSuccess
        })
    }

    function returnBookSuccess(data) {
        if (data == 'ok') {
            //还书成功
            alert("还书成功!!!")
            //暂存架
            borrowTsShow()
            //借阅架
            borrowBookTsShow()
            //加载my信息
            myLoad()
        }else {
            let repayOrNot = confirm(data)
            if (repayOrNot){
                let opr = "fineAmount"
                $.ajax({
                    'url': '../../BorrowServlet.action',
                    'type': 'post',
                    'data': {opr},
                    'dataType': 'json',
                    'success': fineAmountSuccess
                })
            }
        }
    }
    function fineAmountSuccess(data) {
        if (data == 'ok'){
            alert("还书成功!!!")
            //暂存架
            borrowTsShow()
            //借阅架
            borrowBookTsShow()
            //加载my信息
            myLoad()
        }else {
            alert("您的余额不足以偿还罚款金额!!!")
        }
    }

    // 续借
    let BORROWIDS
    function renew(borrowId, renewDays, bookName, borrowDay) {
        $('#borrowRenew').slideDown()
        BORROWIDS = borrowId
        $('#borrowRenewRenewDay').val(0)
        $('#borrowRenewBookName').html(bookName)
        borrowDay = new Date(borrowDay); // 假设borrowDay是一个有效的日期字符串或Date对象
        renewDays = renewDays * 24 * 60 * 60 * 1000; // 将续借天数转换为毫秒
        let updatedDateMilliseconds = borrowDay.getTime() + renewDays; // 计算新的日期的毫秒值
        let updatedDate = new Date(updatedDateMilliseconds); // 创建一个新的Date对象
        let formattedDate = updatedDate.toLocaleString('zh-CN', {timeZone: 'Asia/Shanghai'}); // 转换为格式化的日期字符串，指定时区为上海
        $('#borrowRenewBorrowDate').html(formattedDate)
    }

    function borrowRenew() {
        let borrowId = BORROWIDS
        let renewDay = $('#borrowRenewRenewDay').val()
        if (borrowRenewVerify(renewDay)) {
            $.ajax({
                'url': '../../BorrowController/borrowRenew',
                'type': 'post',
                'data': {borrowId, renewDay},
                'dataType': 'json',
                'success': borrowRenewSuccess
            })
        } else {
            alert("请输入正确数字!!!")
        }
    }

    function borrowRenewSuccess(data) {
        if (data == 'ok') {
            alert("续借成功！！！")
            //借阅架
            borrowBookTsShow()
            borrowRenewC()
        } else {
            alert("续借失败！！！")
            //借阅架
            borrowBookTsShow()
            borrowRenewC()
        }
    }


    function borrowRenewVerify(renewDay) {
        // 校验是否是纯数字
        if (!/^\d+$/.test(renewDay)) {
            return false;
        }
        // 转换为数字类型
        var num = parseInt(renewDay, 10);
        // 校验是否是正数且大于0
        if (num <= 0) {
            return false;
        }
        return true;
    }

    // 一键借阅
    function borrowBookTs() {
        let bookCodes = [];
        // 获取所有具有class 'bookTS'的元素
        let bookElements = document.getElementsByClassName('bookTS');

        // 遍历这些元素
        for (let i = 0; i < bookElements.length; i++) {
            // 检查元素的checked属性是否为true
            if (bookElements[i].checked) {
                // 获取元素的code属性值并添加到bookCodes数组中
                bookCodes.push(bookElements[i].getAttribute('code'));
            }
        }
        $.ajax({
            'url': '../../BorrowController/borrowBookTs',
            'type': 'post',
            'data': { bookIds: JSON.stringify(bookCodes)},
            'dataType': 'json',
            'success': borrowBookTsSuccess
        })
    }

    function borrowBookTsSuccess(data) {
        if (data == 'ok') {
            alert("借阅完成!")
            //暂存架
            borrowTsShow()
            //图书加载
            bookLoad(0, '')
            //加载借阅架
            borrowBookTsShow()
            //加载my信息
            myLoad()
        } else if (data == 'noBookNum') {
            alert("借阅失败,你的借阅数量已经上限了!!!")
        }
    }

    function borrowBookTsShow() {
        $.ajax({
            'url': '../../BorrowController/borrowBookTsShow',
            'type': 'post',
            'data': {},
            'dataType': 'json',
            'success': borrowBookTsShowSuccess
        })
    }

    function borrowBookTsShowSuccess(data) {
        $('#borrowDiv div').remove()
        data.forEach(dd => {
            let bookId = dd.bookId
            let dueDate = new Date(dd.borrowDate);
            dueDate.setDate(dueDate.getDate() + dd.borrowDays + dd.renewDays);
            let isDue = dueDate > new Date();
            let dueColor = isDue ? '' : 'red';
            let dueColor2 = isDue ? 'greenyellow' : 'red';
            $('#borrowSt').css('background-color', dueColor2);
            $('#borrowDiv').append(`<div class="row" bookId="` + bookId + `"style="border: 1px solid #333;width: 100%;padding: 10px;border-radius: 10px;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);margin: 20px auto">
        <div class="col-md-9">
        <div bookId="1">
                                《<span style="color:` + dueColor + `">` + dd.bookName + `</span>》<br>
                                <span style="color:` + dueColor + `">借阅日期：<span  style="font-size: 10px">` + dd.borrowDate + `</span>
                                    &nbsp;&nbsp;&nbsp;
                                    借阅天数：<span  style="font-size: 10px">` + dd.borrowDays + `</span>
                                    &nbsp;&nbsp;&nbsp;
                                    续借天数：<span style="font-size: 10px">` + dd.renewDays + `</span>
                                </span>
    </div>
    </div>
    <div class="col-md-3 d-flex justify-content-end">
  ${isDue ? '<input type="button" style="width: 90px;height: 50px" value="缁��" onclick="renew(' + dd.id + ',' + dd.borrowDays + ',\'' + dd.bookName + '\',\'' + dd.borrowDate + '\')" class="btn btn-primary">&nbsp;&nbsp;' : ''}
`)
        })
    }


    //一键清除
    function eliminateBookTs() {
        let bookCodes = [];

        // 获取所有具有class 'bookTS'的元素
        let bookElements = document.getElementsByClassName('bookTS');

        // 遍历这些元素
        for (let i = 0; i < bookElements.length; i++) {
            // 检查元素的checked属性是否为true
            if (bookElements[i].checked) {
                // 获取元素的code属性值并添加到bookCodes数组中
                bookCodes.push(bookElements[i].getAttribute('code'));
            }
        }

        $.ajax({
            'url': '../../BookController/eliminateBookTs',
            'type': 'post',
            'data': { bookIds: JSON.stringify(bookCodes)},
            'dataType': 'json',
            'success': eliminateBookTsSuccess
        })
    }

    function eliminateBookTsSuccess(data) {
        if (data == 'ok') {
            //暂存架
            borrowTsShow()
        }
    }

    //一键全选暂存架图书
    function checkAllBookTs() {
        // 获取所有带有 .bookTS 类的元素
        let bookTsElements = $('.bookTS');
        // 检查这些元素当前的选中状态
        let areAllChecked = bookTsElements.prop('checked');
        // 根据当前的选中状态，设置新的选中状态
        bookTsElements.prop('checked', !areAllChecked);
    }

    function borrowTsShow() {
        $.ajax({
            'url': '../../BookController/borrowTsShow',
            'type': 'post',
            'data': {},
            'dataType': 'json',
            'success': borrowTsShowSuccess
        })
    }

    function borrowTsShowSuccess(data) {
        if (data.length === 0) {
            $('#borrowTS p').remove()
            $('#borrowTS').append(` <p
    id = "noDataImage"
    style = "text-align: center;padding-top: 100px" >
        <img
    src = "../../image/专业库.png"
    style = "width: 100px" >
        <br> 快去添加图书吧
        </p>`)
        } else {
            $('#borrowTS p').remove()
            data.forEach(dd => {
                $('#borrowTS').append(` <p>
                        <input type="checkbox" code="` + dd.code + `" bookId="` + dd.id + `" class="bookTS">
                        《<span>` + dd.name + `</span>》
                        &nbsp;编号:《<span>` + dd.code + `</span>》
                    </p>`)
            })
        }
    }

    function myLoad() {
        $.ajax({
            'url': '../../ReaderController/myLoad',
            'type': 'post',
            'data': {},
            'dataType': 'json',
            'success': myLoadSuccess
        })
    }

    function myLoadSuccess(data) {
        $('#my-borrowSum').html(data.borrowSum)
        $('#my-email').html(data.email)
        $('#my-money').html('￥' + (data.money).toFixed(2))
        $('#my-name').html(data.name)
    }

    function borrowRenewC() {
        $('#borrowRenew').slideUp()
    }

    function bookDetail(e) {
        if ($('#my-name').html() == '') {
            alert("请先登录!")
            window.location.href = "../../jsp/login/login.jsp"
        } else {
            let bookId = $(e).attr('bookId')
            window.location.href = "../../jsp/bookDetails/bookDetails.jsp?bookId=" + bookId
        }
    }


    function homeSearch() {
        let text = $('#homeSearchText').val()
        bookLoad(bookListNum, text)
    }

    // 书籍搜索 类型，搜索内容
    function bookLoad(categoryId, text) {
        $.ajax({
            'url': '../../BookController/bookLoad',
            'type': 'post',
            'data': { categoryId, text},
            'dataType': 'json',
            'success': bookLoadSuccess
        })
    }

    function bookLoadSuccess(data) {
        $('#homeBookList div').remove()
        if (data.length === 0) {
            $('#homeBookList').append(`
            <div style="margin-left: 220px;border:0px;width:300px;height: 200px" class=" book-item">
            <img src="../../image/没有数据%20(2).png">
            <p>抱歉,没有找到你想要的书哦~</p>
            </div>
                     `)
        } else {
            data.forEach(dd => {
                let status
                let col
                if (dd.satus == 0) {
                    status = '未在库'
                    col = 'red'
                } else if (dd.satus == 1) {
                    status = '在库'
                    col = 'green'
                } else if (dd.satus == 2) {
                    status = '外借'
                    col = 'orange'
                }
                let publishDate = dd.publishDate
                publishDate = publishDate.replace(/(\d{4}-\d{2}-\d{2}) \d{2}:\d{2}:\d{2}/, '$1')

                $('#homeBookList').append(`
                     <div onclick="bookDetail(this)" bookId = "` + dd.id + `" class=" book-item" style="border: 0px">
                        <img style="width: 50px" src="../../image/` + dd.imageUrl + `">
                        <p></p>
                        <p style="font-size: 15px;height: 20px">《` + dd.name + `》</p>
                        <p style="font-size: 10px;height: 10px">` + dd.authors + `</p>
                        <p style="font-size: 10px;height: 10px"">` + dd.code + `</p>
                        <p style="font-size: 10px;height: 10px";">` + publishDate + `</p>
                        <p style="font-size: 10px;height: 10px;color: ` + col + `">` + status + `</p>
                    </div>`)

            })
        }
    }

    let bookListNum = 0

    function homeUlLiOnclick(e) {
        $('#homeUl .list-group-item').css('color', 'black');
        $(e).css('color', '#FFA500');
        let codeIdValue = $(e).attr("codeId");
        bookLoad(codeIdValue, '')
        $('#homeSearchText').val("")
        bookListNum = codeIdValue
    }

    $('.navA').click(function () {
        $('.navA').css('color', 'black');
        $(this).css('color', 'orange');
        // 将所有.navA元素的字体大小恢复为正常大小
        $('.navA').css('font-size', '');
        // 将当前点击的元素的字体大小扩大0.2倍
        $(this).css('font-size', '120%');
    })

    // home左侧列表加载
    function homeUlLoad() {
        $.ajax({
            'url': '../../CategoryController/homeUlLoad',
            'type': 'post',
            'data': {},
            'dataType': 'json',
            'success': homeUlLoadSuccess
        })
    }

    function homeUlLoadSuccess(data) {
        $('#homeUl li:not(:first-child)').remove()
        data.forEach(dd => {
            $('#homeUl').append(`<li codeId="` + dd.id + `" class="list-group-item" onclick="homeUlLiOnclick(this)">` + dd.name + `</li>`)
        })
    }
</script>